<template>
  <div class="app-container">
    <div style="text-align: right; padding-bottom: 20px;">
      <el-button type="success" plain icon="el-icon-back" size="mini" @click="handleClose" >返 回</el-button>
    </div>
    <el-backtop :visibility-height="20" :bottom="100"></el-backtop>
    <el-card>
      <div slot="header" class="card-head clearfix">
      <span>基本信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="16" class="info-items">
            <el-col :span="12" class="info-items">
              <el-col :span="8" class="label-col">账号：</el-col>
              <el-col :span="16">{{ info.phone||'-' }}</el-col>
            </el-col>
            <el-col :span="12" class="info-items">
              <el-col :span="8" class="label-col">昵称：</el-col>
              <el-col :span="16">{{ info.nickName||'-' }}</el-col>
            </el-col>
            <el-col :span="12" class="info-items">
              <el-col :span="8" class="label-col">注册时间：</el-col>
              <el-col :span="16">{{ info.regTime||'-' }}</el-col>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">头像：</el-col>
            <el-col :span="16">
              <el-image v-if="info.profileUrl" :src="info.profileUrl" :preview-src-list="[info.profileUrl]" fit="fill" style="width: 100px; height: 100px" ></el-image>
              <img v-else src="@/assets/images/def_head.png" class="user-avatar"/>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card v-if="info.authStatus === '0'" style="margin-top: 30px;" >
      <div slot="header" class="card-head clearfix">
        <span>认证信息</span>
        <el-tag type="info" style="float: right;">未认证</el-tag>
      </div>
      <div style="text-align: center;">
        <h2>暂无认证信息</h2>
      </div>
    </el-card>

    <el-card v-else style="margin-top: 30px;">
      <div slot="header" class="card-head clearfix">
        <span>认证信息</span>
        <el-tag v-if="entity.authStatus === '1'" type="success" style="float: right;">已认证</el-tag>
        <el-tag v-if="entity.authStatus === '2'" type="warning" style="float: right;">审核中</el-tag>
        <el-tag v-if="entity.authStatus === '3'" type="danger" style="float: right;">审核失败</el-tag>
      </div>
      <div>
        <el-divider content-position="left">主体信息</el-divider>
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体名称：</el-col>
            <el-col :span="16">{{ entity.entityName||'-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体类型：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.business_entity_type" :key="dict.value">
                <span v-if="dict.value === entity.entityType"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体属性：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.business_entity_attribute" :key="dict.value">
                <span v-if="dict.value === entity.entityAttr"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体行业：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.business_entity_industry" :key="dict.value">
                <span v-if="dict.value === entity.entityIndustry"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">营业期限：</el-col>
            <el-col :span="16">
              <span>{{ (entity.timeLimitStart || "") + "至" + (entity.permanentlyFlag === '1' ? '长期' : (entity.timeLimitEnd || ""))}}</span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">是否国家级示范户：</el-col>
            <el-col :span="16">{{entity.demonstrationZoneFlag === '1'? '是' : '否'}}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">上市时间：</el-col>
            <el-col :span="16">{{ entity.marketTime || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">是否龙头企业：</el-col>
            <el-col :span="16">{{ entity.leadingFlag === '1' ? '是' : '否'}}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">辐射带动基地：</el-col>
            <el-col :span="16">{{ entity.driveBase || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">农牧户数：</el-col>
            <el-col :span="16">{{ entity.households || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">商标：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.trademark_type" :key="dict.value">
                <span v-if="dict.value === entity.trademark"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">证件类型：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.business_certificate_type" :key="dict.value">
                <span v-if="dict.value === entity.certType"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">内检员：</el-col>
            <el-col :span="16">{{ entity.internalInspector || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">内检员电话：</el-col>
            <el-col :span="16">{{ entity.internalInspectorPhone || '-' }}</el-col>
          </el-col>
          <el-col :span="16" class="info-items">
            <el-col :span="4" class="label-col">详细地址：</el-col>
            <el-col :span="20">{{ (entity.province || '') + (entity.city || '') + (entity.district || '') + (entity.town || '') + (entity.village || '') + (entity.address || '') }}</el-col>
          </el-col>
          <el-col :span="16" class="info-items">
            <el-col :span="4" class="label-col">主体简介：</el-col>
            <el-col :span="20">{{ entity.entityIntroduce || '-' }}</el-col>
          </el-col>
          <el-col :span="16" class="info-items">
            <el-col :span="4" class="label-col">所在位置：</el-col>
            <el-col :span="20">
              <div ref="mapContainer" style="width: 100%; height: 400px;"></div>
            </el-col>
          </el-col>
        </el-row>

        <el-divider content-position="left">法人信息</el-divider>
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">姓名：</el-col>
            <el-col :span="16">{{ entity.legalPerson || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">证件类型：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.certificate_type" :key="dict.value">
                <span v-if="dict.value === entity.legalPersonCertType"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">证件号码：</el-col>
            <el-col :span="16">{{ entity.legalPersonCertNo || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">联系电话：</el-col>
            <el-col :span="16">{{ entity.legalPersonPhone || '-' }}</el-col>
          </el-col>
        </el-row>

        <el-divider content-position="left">联系人信息</el-divider>
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">姓名：</el-col>
            <el-col :span="16">{{ entity.liaisonMan || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">证件类型：</el-col>
            <el-col :span="16">
              <span v-for="dict in dict.type.certificate_type" :key="dict.value">
                <span v-if="dict.value === entity.liaisonManCertType"> {{ dict.label }}</span>
              </span>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">证件号码：</el-col>
            <el-col :span="16">{{ entity.liaisonManCertNo || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">联系电话：</el-col>
            <el-col :span="16">{{ entity.liaisonManPhone || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">邮箱：</el-col>
            <el-col :span="16">{{ entity.liaisonManEmail || '-' }}</el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">传真：</el-col>
            <el-col :span="16">{{ entity.liaisonManFax || '-' }}</el-col>
          </el-col>
        </el-row>

        <el-divider content-position="left">证照信息</el-divider>
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体照片：</el-col>
            <el-col :span="16">
              <el-image v-if="entity.entityPhoto" :src="entity.entityPhoto" :preview-src-list="[entity.entityPhoto]" fit="fill" style="width: 100%;"></el-image>
            </el-col>
          </el-col>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">主体证照（营业执照）：</el-col>
            <el-col :span="16">
              <el-image v-if="entity.entityCert" :src="entity.entityCert" :preview-src-list="[entity.entityCert]" fit="fill" style="width: 100%;"></el-image>
            </el-col>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card v-if="info.authStatus !== '0' && (entity.authStatus === '1' || entity.authStatus === '3')" style="margin-top: 30px;">
      <div slot="header" class="card-head clearfix">
        <span>审核情况</span>
      </div>
      <div style="font-size: 14px;">
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">审核状态：</el-col>
            <el-col :span="16">{{ entity.authStatus === "1" ? "审核通过" : "审核不通过" }}</el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="info-items">
            <el-col :span="8" class="label-col">{{ entity.authStatus === "1" ? "备注：" : "原因：" }}</el-col>
            <el-col :span="16">{{ entity.authFailReason || '-' }}</el-col>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInfo } from "@/api/business/user"

export default {
  name: "Users",
  dicts: ['business_entity_type', 'business_entity_attribute', 'trademark_type', 'business_certificate_type', 'certificate_type', 'business_entity_industry'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 地图实例
      map: null,
      // 地图中心点坐标
      center: null,
      // 用户ID
      userId: '',
      // 主体ID
      entityId: '',
      // 页面调整类型
      routerType: '',
      // 基本信息
      info: {},
      // 实名认证信息
      entity: {},
    }
  },
  created() {
    this.userId = this.$route.params && this.$route.params.userId;
    this.entityId = this.$route.params && this.$route.params.entityId;
    this.routerType = this.$route.params && this.$route.params.type;
  },
  mounted() {
    this.getData(this.userId, this.entityId);
  },
  methods: {
    /** 查询生产人信息列表 */
    getData(userId, entityId) {
      if("-" === entityId) {
        entityId = "";
      }
      this.loading = true;
      getInfo(userId, entityId).then(response => {
        let data = response.data;
        this.info = data.baseInfo;
        this.entity = data.entityInfo;
        this.loading = false;

        if(this.entity && this.entity.longitude && this.entity.latitude) {
          this.center = new TMap.LatLng(this.entity.latitude, this.entity.longitude);
          this.initMap();
        }
      })
    },

    /** 初始化地图组件 */
    initMap(){
      let that = this;
      // 初始化地图
      that.map = new TMap.Map(this.$refs.mapContainer, {
        // 设置地图中心点坐标
        center: that.center,
        // 设置地图缩放级别
        zoom: 17,
      });

      // 设置点标记
      new TMap.MultiMarker({
        map: that.map,
        // 点标记样式
        styles: {
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
          }),
        },
        // 点标记数据数组
        geometries: [
          {
            id: 'marker',
            styleId: 'marker', // 样式id
            // 标记位置(纬度，经度，高度)
            position: that.center,
          },
        ],
      });

      // 文本标记
      new TMap.MultiLabel({
        map: that.map,
        styles: {
          label: new TMap.LabelStyle({
            offset: { x: 0, y: -50 }, // 文字偏移属性单位为像素
            padding: '10px 20px',
            backgroundColor: "#fff",
            borderWidth: 1,
            borderRadius: 5,
          }),
        },
        geometries: [
          {
            id: 'label', // 点图形数据的标志信息
            styleId: 'label', // 样式id
            position: that.center, // 标注点位置
            content: that.info?.businessEntity, // 标注文本
          },
        ],
      });
    },

    /** 返回按钮操作 */
    handleClose() {
      let obj = { path: "/index" };
      if(this.routerType === "entity") {
        // 返回主体列表
        obj = { path: "/businessEntity/entity" };
      }
      if(this.routerType === "auth") {
        // 返回审核列表
        obj = { path: "/businessEntity/auth" };
      }
      if(this.routerType === "user") {
        // 返回用户列表
        obj = { path: "/users" };
      }

      this.$tab.closeOpenPage(obj)
    },
  }
}
</script>

<style>
.el-card__header {
  padding: 15px;
  background-color: #eee;
  font-weight: bold;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.info-items {
  font-size: 14px;
  line-height: 30px;
}
.label-col {
  font-weight: bold;
  text-align: right;
}
.user-avatar {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
